<template>
  <div>
    <van-nav-bar title="标题" left-text="返回" left-arrow>
      <template #left>
        <van-icon class="iconfont iconnew" size="50px" color="#fff" />
      </template>
      <template #title>
        <div class="navSearch">
          <van-icon name="search" size="16" color="#fff" />
          <span>搜索商品</span>
        </div>
      </template>
      <template #right>
        <van-icon name="manager-o" color="#fff" size="20px" />
      </template>
    </van-nav-bar>
    <van-tabs>
      <van-tab v-for="item in list" :key="item.id" :title="item.name">
        <!-- 新闻(文章)列表 -->
        <newsItem></newsItem>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { category } from "@/api/news";
export default {
  data() {
    return {
      list: [], //栏目列表
    };
  },
  created() {
    //获取栏目列表数据
    category().then((res) => {
      console.log(res);
      this.list = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  background-color: #ff0000;
  .van-nav-bar__title {
    width: 60%;
    .navSearch {
      width: 100%;
      height: 30px;
      line-height: 30px;
      background-color: rgba(255, 255, 255, 0.5);
      color: #fff;
      border-radius: 20px;
    }
  }
}
</style>